<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户管理</title>
    <style>
        h1:hover{
            color:pink;
        }
    </style>
</head>
<body>
<%--因为layui是基于jQuery的，所以在导入layui.js之前要先导入jQuery的静态资源--%>
<h1>用户管理</h1>
<br><br>
    <button type="button" id="add1" class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal btn btn-w-m btn-primary">
        <i class="layui-icon">&#xe608;</i> 添加
    </button>

    <table class="layui-table" id="t1">
        <colgroup>
            <col width="150">
            <col width="200">
            <col>
        </colgroup>
        <thead>
        <tr>
            <th><input type="checkbox" id="check1"></th>
            <th>用户名编号</th>
            <th>用户名姓名</th>
            <th>用户名密码</th>
            <th>用户名头像</th>
            <th>用户名类型</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>

            <c:forEach var="one" items="${msg1.data}">
            <tr>
                <td><input type="checkbox" name="c"></td>
                <td>${one.id}</td>
                <td>${one.username}</td>
                <td>${one.password}</td>
                <td><img style="width: 40px;height: 40px;border-radius: 50%" src="http://localhost:8080/upload/${one.userimg}" alt=""></td>
                <td>${one.type}</td>
                <td>
                    <button type="button" class="layui-btn layui-btn-sm layui-btn-warm" onclick="query1('${one.id}')"  id="update1">
                        <i class="layui-icon">&#xe642;</i>
                    </button>
                    <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" onclick="delete1('${one.id}')">
                        <i class="layui-icon">&#xe640;</i>
                    </button>
                </td>
            </tr>
            </c:forEach>

        </tbody>
    </table>

<div id="page"></div>
</body>
<script>

    //点击新增按钮
    //JavaScript代码区域
    layui.use('layer', function(){
        var layer = layui.layer;
        var $ = layui.$;
        $("#add1").click(function () {
            /* 获取iframe页的DOM */
            layer.open({
                type: 2,
                title: "新增用户",
                area: ['451px','390px'],
                content: "user/add.jsp"
            });
        })

    });

    //点击修改按钮： onclick="query1('')"
    function query1(id) {
        var layer = layui.layer;
        /* 获取iframe页的DOM */
        //弹出层
        layer.open({
            type: 2,
            title: "修改用户",
            area: ['450px','450px'],
            content: "user.do?method=queryOne&id="+id
        });
    }

    //点击删除按钮
    function delete1(id){
        layer.open({
            type:2,
            title:'删除用户',
            maxmin:true,
            shadeClose:true,//点击遮罩关闭层
            area:['451px','390px'],
            content:'user.do?method=deleteFindById&id='+id
        });

       /* var b = confirm("是否删除"+id+"?");
        if(b){
            $.ajax({
                url:'user.do',
                data:{"method":"deleteUser","id":id},
                success:function () {
                    parent.load("user.do?method=findAll");
                }
            })
        }*/
    }

    //分页操作
    layui.use('laypage', function(){
        var laypage = layui.laypage;
        //执行一个laypage实例
        laypage.render({
            elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
            ,count: ${msg1.total} //数据总数，从服务端得到
            ,curr:${msg1.current}
            ,limit:${msg1.limit}
            ,jump: function(obj, first){
                //obj包含了当前分页的所有参数，比如：
                <%--console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。--%>
                <%--console.log(obj.limit); //得到每页显示的条数--%>
                <%--console.log(${msg.total})--%>
                //首次不执行
                if(!first){//如果不是首次，就执行
                    //do something
                    parent.load("user.do?method=findPage&current="+obj.curr)
                }
            }
        });
    });
</script>
</html>
